<template>
    <div >生命周期</div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'

export default {
    
  beforeCreate(){ console.log('beforeCreate')},  
  created(){ console.log('created')},
    
  beforeMount(){ console.log('beforeMount')},
  mounted(){ console.log('mounted')},
    
  beforeUpdate(){ console.log('beforeUpdate')},
  updated(){ console.log('updated')},
    
  beforeDestroy(){ console.log('beforeDestroy')},
  destroyed(){ console.log('destroyed')},


  setup () {
    console.log('setup')
    onBeforeMount(()=>{
      console.log('onBeforeMount')
    })

    onMounted(()=>{

      // .....

      console.log('onMounted1, ajax......')
    })

    onMounted(()=>{
      console.log('onMounted2')
    })

    // dom 0 : <div onclick="xxxx" onclick="xxxx"/> 
    // dom 2 : dom.addEventListener('click', fn1), dom.addEventListener('click', fn2)
  }

}
</script>